<template>
  <div class="match-item">
    <div class="match-info">
      <MatchInfoLeft :match="match" />
      <MatchResult :match="match" :odds="match.main_odds_data" />
    </div>
    <Other :match="match" />
  </div>
</template>
<script setup>
import MatchInfoLeft from './MatchInfoLeft.vue'
import MatchResult from './MatchResult.vue'
import Other from './other/Other.vue'

const prosp = defineProps({
  match: Object,
})
</script>
<style lang="scss" scoped>
.match-item {
  padding: 16px 0;
  border-top: 1px solid #ebebeb;
}

.match-info {
  display: flex;
  margin-bottom: 16px;
}

.tab {
  display: flex;
}

.tab-item {
  padding: 4px 8px;
  border-radius: 14px;
  background-color: #f5f5f5;
  margin-right: 8px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.tab-item--active {
  background-color: var(--primary);
  color: #fff;
}
</style>
